<script setup>
  import UaMarkdown from '@/pages/nc_chat/components/ua2-markdown/ua-markdown.vue';
  import { computed, nextTick, reactive } from 'vue';
  import sheep from '@/sheep';
  import ATrumpet from '@/pages/nc_chat/components/a-trumpet/a-trumpet.vue';
  import { subtract } from 'lodash/math';
  import SuAvatar from '@/sheep/ui/su-avatar/su-avatar.vue';
  import throttle from '@/sheep/helper/throttle';

  const emits = defineEmits(['foll_sumbit', 'playSound', 'shareMessage']);

  const styles = (height) => {
    return {
      height,
      type: 'color',
      background: {
        bgColor: 'transparent',
      },
    };
  };
  const imageStyle = (width, height) => {
    return {
      width: `${width}rpx`,
      height: `${height}rpx`,
      borderRadius: '50%',
    };
  };
  const margin = (string) => {
    return {
      margin: string,
    };
  };

  const props = defineProps({
    info: {
      type: Object,
      default: () => ({}),
    },
    friendInfo: {
      type: Object,
      default: () => ({}),
    },
    userInfo: {
      type: Object,
      default: () => ({}),
    },
    chatInfo: {
      type: Object,
      default: () => ({}),
    },
    chatListLength: {
      type: Number,
      default: 0,
    },
    subscript: {
      type: Number,
      default: 0,
    },
    shareFlag: {
      type: Boolean,
      default: false,
    },
  });

  const nc_image = computed(() => sheep.$store('AI').nc_image);
  const nc_image_path = computed(() => sheep.$store('AI').nc_image_path);

  const audio = reactive({
    play: false,
  });
  const state = reactive({
    flag: true,
    interVal: null,
  });

  const innerAudio = uni.createInnerAudioContext();

  function playSound(info) {
    emits('playSound', info, props.subscript);
  }

  // 预览图片
  function preview(url) {
    uni.previewImage({
      urls: [url],
    });
  }

  function foll_sumbit(item) {
    if (state.flag) {
      state.flag = false;
      emits('foll_sumbit', item);
      setTimeout(() => {
        state.flag = true;
      }, 1000);
    }
  }

  function clickToSelect() {
    emits('clickToSelect', props.subscript);
  }

  // 判断是否为json
  function isJSON(str) {
    if (typeof str == 'string') {
      try {
        let obj = JSON.parse(str);
        console.log(typeof obj);
        if (typeof obj == 'object' && obj) {
          return true;
        } else {
          return false;
        }
      } catch (e) {
        return false;
      }
    }
  }

  // 分享消息
  function shareMessage() {
    emits('shareMessage', props.subscript);
  }
</script>

<template>
  <view class="w-100 flex flex-column align-center justify-center" style="transform: rotate(180deg);"
        @click="shareMessage">
    <s-block :styles="styles(64)"></s-block>
    <view class="chatListItem_my flex align-start justify-end" v-if="info.sender_id == userInfo.id">
      <view class="flex flex-column align-end">
        <view class="text flex flex-column" :style="[margin('12rpx 18rpx 0 0')]" style="display: inline-block">
          <image style="max-width: 510rpx;" :src="info.message" v-if="info.type == 'image'" mode="widthFix"
                 @click="preview(info.message)"></image>
          <view class="flex flex-row justify-end align-center" style="width: 100rpx" v-else-if="info.type == 'voice'"
                @click.stop="playSound(info)">
            <ATrumpet direction="left" :info="info.message" v-if="!!info.message" :isPlay="!!info.isPlay"></ATrumpet>
          </view>
          <view class="flex" v-else>
            <ua-markdown class="messageParse" :source="info.message"></ua-markdown>
          </view>

          <view class="loadding-box" v-if="!!info.is_decimalPoint">
            <view class="dot1"></view>
            <view class="dot2"></view>
            <view class="dot3"></view>
          </view>
        </view>

        <view class="text flex flex-column" :style="[margin('12rpx 18rpx 0 0')]"
              v-if="info.type == 'voice' && !!info.voice_content">
          <ua-markdown class="messageParse" :source="info.voice_content"></ua-markdown>
        </view>
      </view>
      <image :style="[imageStyle(96,96)]"
             :src="userInfo.avatar.indexOf('http') != -1 ? userInfo.avatar :`${nc_image}${userInfo.avatar}`"></image>
      <view v-if="!!info.is_select && !!shareFlag" :style="[imageStyle(50,96)]"
            class="flex flex-row align-center justify-center"
            @click.stop="clickToSelect()">
        <view class="select flex flex-row align-center justify-center">
          <image :style="[imageStyle(18,15)]" :src="`${nc_image_path}/nc_chat_yes.png`"></image>
        </view>
      </view>
      <view v-else-if="!!shareFlag" :style="[imageStyle(50,96)]" class="flex flex-row align-center justify-center"
            @click.stop="clickToSelect()">
        <view class="select_no"></view>
      </view>
    </view>
    <view class="chatListItem_my flex align-start justify-start" v-else-if="info.sender_id == friendInfo.id">
      <view v-if="!!info.is_select && !!shareFlag" :style="[imageStyle(50,96)]"
            class="flex flex-row align-center justify-center"
            @click.stop="clickToSelect()">
        <view class="select flex flex-row align-center justify-center">
          <image :style="[imageStyle(18,15)]" :src="`${nc_image_path}/nc_chat_yes.png`"></image>
        </view>
      </view>
      <view v-else-if="!!shareFlag" :style="[imageStyle(50,96)]" class="flex flex-row align-center justify-center"
            @click.stop="clickToSelect()">
        <view class="select_no"></view>
      </view>
      <su-avatar :src="friendInfo.avatar.indexOf('http') != -1 ? friendInfo.avatar :`${nc_image}${friendInfo.avatar}`"
                 :avatar-style="imageStyle(96,96)" :imageStyle="{width:'96rpx'}"
                 :show-border="friendInfo.is_follow == 1"></su-avatar>
      <view>
        <view class="text flex flex-column" :style="[margin('12rpx 0 0 18rpx')]" @click.stop="playSound(info)">
          <view class="flex">
            <ua-markdown class="messageParse"
                         :source="info.message"></ua-markdown>
          </view>
          <view class="loadding-box" v-if="!!info.is_decimalPoint">
            <view class="dot1"></view>
            <view class="dot2"></view>
            <view class="dot3"></view>
          </view>
        </view>
        <view class="follow_up" v-if="!!info.follow_up && subscript == 0"
              v-for="(foll_item,foll_index) in info.follow_up" :key="foll_index"
              @click.stop="foll_sumbit(foll_item)">
          {{ foll_item }}
        </view>
      </view>
    </view>
    <s-block :styles="styles(64)"></s-block>
  </view>
</template>

<style scoped lang="scss">
  .chatListItem_my {
    width: 702rpx;
    position: relative;

    .text {
      max-width: 520rpx;
      background: #FFFFFF;
      padding: 19rpx 15rpx;
      font-size: 28rpx;
      border-radius: 12rpx;
    }

    .sound {
      width: 200rpx;
      background: #FFFFFF;
      padding: 19rpx 15rpx;
    }

    .convertIntoText {
      position: absolute;
      width: 200rpx;
      bottom: 95rpx;
      right: 115rpx;
      background: #EEEEEE;
      padding: 19rpx 15rpx;
      z-index: 10;
    }
  }

  .loadding-box {
    display: flex;
    padding: 18rpx 0;

    .dot1,
    .dot2,
    .dot3 {
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      margin-left: 6rpx;
    }

    .dot1 {
      animation: jump 1.2s -0.4s linear infinite;
      background: #8c8ef7;
    }

    .dot2 {
      animation: jump 1.2s -0.2s linear infinite;
      background: #5e85d1;
    }

    .dot3 {
      animation: jump 1.2s linear infinite;
      background: #2e6de7;
    }

    @keyframes jump {

      0%,
      80%,
      100% {
        transform: scale(0.9);
        opacity: 1.0;
      }

      40% {
        transform: scale(1.1);
        opacity: 0.8;
      }
    }
  }


  .follow_up {
    display: table;
    max-width: 520rpx;
    padding: 12rpx 20rpx;
    background: #FFFFFF;
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    //border: 1rpx solid #A0A0A0;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.8);
    margin-top: 20rpx;
    margin-left: 18rpx;
  }

  .select_no {
    display: inline-block;
    width: 30rpx;
    height: 30rpx;
    background: #4E4E4E;
    border: 2rpx solid #FFFFFF;
    border-radius: 50%;
  }

  .select {
    width: 30rpx;
    height: 30rpx;
    background: #FFFFFF;
    border-radius: 50%;
  }
</style>